import React, { Component } from 'react';

class Demo extends Component{
  state={}
  constructor(props){
    super(props)
    console.log('1子组件中的constructor')
  }
  static getDerivedStateFromProps(props,state){
    console.log('2子组件中的getDerivedStateFromProps')
    return null
  }
  render(){
    console.log('3子组件中的render')
    return <h1>子组件要return东西哦，</h1>
  }
  componentDidMount(){
    console.log('4子组件中的componentDidMount')
  }
}

class App extends Component{
  state={
    statemsg:'父组件最原始的data'
  }
 constructor(props){
   console.log('1父组件的constructor')
   super(props)

 }
 static getDerivedStateFromProps(props,state){
   console.log('2父组件的getDrivedStateFromProps')
   return null
 }
  render(){
    console.log('3父组件的render');
    return (
      <div>
       <div className="outerBox" id="outerBox">
          <div className="innerBox"></div>
        </div>
        <input type="text" name="" id="" ref={this.ref}/>
        <button onClick={this.handleClick}>按钮</button>
        <Demo></Demo>
      </div>
    )
  }

  componentDidMount(){
    console.log('4父组件的componentDidMount')
  }
 
}

export default App;
// [HMR] Waiting for update signal from WDS...
// App.js:27 1父组件的constructor
// App.js:32 2父组件的getDrivedStateFromProps
// App.js:36 3父组件的render
// App.js:7 1子组件中的constructor
// App.js:10 2子组件中的getDerivedStateFromProps
// App.js:14 3子组件中的render
// App.js:18 4子组件中的componentDidMount
// App.js:50 4父组件的componentDidMoun
